<template>
  <a-drawer v-model:visible="visible" v-bind="bind">
    <slot></slot>
    <template v-for="slot in ['header', 'title', 'footer']" #[slot]>
      <slot :name="slot" />
    </template>
  </a-drawer>
</template>

<script setup lang="ts">
import { omit } from "lodash-es";
import { DrawerKey } from "./type";

const props = defineProps<{
  title?: string;
  drawerKey: DrawerKey;
  width?: string | number;
  height?: string | number;
  placement?: "top" | "right" | "bottom" | "left";
}>();
const visible = ref(false);
const register = inject(props.drawerKey);
const bind = ref(omit(props, "drawerKey"));

const openDrawer = () => (visible.value = true);
const closeDrawer = () => (visible.value = false);

onMounted(() => {
  const config = register?.({
    openDrawer,
    closeDrawer,
  });
  Object.assign(bind.value, config);
});
</script>

<style scoped></style>
